import { Link, Route, useParams } from "react-router-dom";
import {topics} from './topic'

function Home() {
  return <h2>Home</h2>
}
function Resource() {

}

function Topic() {
  const {topicId} = useParams()


  return <div>

  </div>
}

function Topics() {
  return <div>
    <h2>话题列表</h2>
    <ul>
      {topics.map(({name, id}) => {
        return (<li key={id}>
          <Link to={`/nest-demo/topics/${id}`}>{name}</Link>
          </li>)
      })}
    </ul>
    <hr />
    <Route path={`/nest-demo/topics/:topicId`}>
      <Topic />
    </Route>
  </div>
}

export default function NestDemo() {
  return <div>
    <ul>
      <li><Link to='/nest-demo/'>首页</Link></li>
      <li><Link to='/nest-demo/topics'>话题</Link></li>
    </ul>
    <hr/>
    <Route exact path='/nest-demo/'>
      <Home />
    </Route>
    <Route path='/nest-demo/topics'>
      <Topics />
    </Route>

  </div>
}